<script setup>
import { computed } from 'vue'

  const props = defineProps({
    list: {
      type: Array,
      default: ()=> {[]}
    },
    select: {
      type: Array,
      default: ()=> {[]}
    },
  })

  const emit = defineEmits(['changeDone', 'delTodo', 'checkAll'])
  const changeFn = (id) => {
    emit('changeDone', id)
  }
  const isCheckAll = computed(() => {
    return props.select.every((item) => item.done)
  })
</script>

<template>
  <section class="main">
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      :checked="isCheckAll"
      @change="emit('checkAll', !isCheckAll)"
    />
    <label for="toggle-all">Mark all as complete</label>

    <ul class="todo-list">
      <li :class="{ completed: item.done }" v-for="item in select" :key="item.id">
        <div class="view">
          <input class="toggle" type="checkbox" :checked="item.done" @change="changeFn(item.id)" />
          <label>{{ item.name }}</label>
          <button class="destroy" @click="emit('delTodo', item.id)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
    </ul>
  </section>
</template>

<style lang="less" scoped></style>